<style lang="less">
	.el-date-range-picker{
		z-index: 999999999 !important;
	}
	.video-control{
		position: relative;
		z-index: 1;
	}
</style>
<template>
	<div>
		<el-form :inline="true" class="filter-blk flex-1">
			<el-form-item label="回放时间段：">{{startTime}}-{{endTime}}</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="chooseTime">重新选择时间段</el-button>
			</el-form-item>
		</el-form>
		<div id="videoControl" class="video-control mt-10" :style="{width:videoWidth+'px',height: videoHeight+'px',margin:'0 auto'}"></div>
	</div>
	
</template>
<script>
import VideoItem from '@/components/device/VideoItem.vue'
export default {
	name: 'deviceVideo',
	props: {
		scale: {
			type: Number,
			default: 1
		},
		startTime: {
			type: String,
			default: ''
		},
		endTime: {
			type: String,
			default: ''
		},
		number: { // 设备号
			type: String,
			default: ''
		},
	},
	components: {
		VideoItem
	},
	computed: {
		startTimeStamp () {
            if(!this.startTime){
                return 0
            }
            return (+new Date(this.startTime))/1000
        },
        endTimeStamp () {
            if(!this.endTime){
                return 0
            }
            return (+new Date(this.endTime))/1000
        }
	},
	data () {
		return {
			loading: true,
			videoList: [],
			videoWidth: 100,
			videoHeight:100,
            // startTimeStamp: 0,
            // endTimeStamp: 0,
		}
	},
	methods: {
        startPlayback (cameraIndexCode,startTimeStamp,endTimeStamp) {
            oWebControl.JS_RequestInterface({
				funcName: "startPlayback",
                argument: {
                    cameraIndexCode: cameraIndexCode, // 监控点编号
                    startTimeStamp: startTimeStamp, // 录像查询开始时间戳，单位：秒
                    endTimeStamp: endTimeStamp, // 录像查询结束时间戳，单位：秒
                    recordLocation: 1, // 录像存储类型 0-中心存储 1-设备存储
                    transMode: 1, // 传输协议 ，0-UDP 1-TCP
                    gpuMode: 0 // 是否开启 GPU 硬解，0-不开启 1-开启
                }
			})
        },
		chooseTime () {
			this.$emit('chooseTime')
		}
	},
	created () {
        // console.log('报警时间：',this.alarmData.alarmtime)
        // this.endTimeStamp = (+new Date(this.alarmData.alarmtime))/1000
        // this.startTimeStamp = this.endTimeStamp-30
        // console.log('startPlayback',cameraIndexCode,startTimeStamp,endTimeStamp)
	},
	mounted () {
		this.videoWidth = 1560*this.scale
        this.videoHeight = 550*this.scale
        this.initVideoWebPlugin({
            containerId:'videoControl',
            width:this.videoWidth,
            height:this.videoHeight,
            layout: '1x1',
            playMode: 1
        },()=>{
            this.startPlayback(this.number,this.startTimeStamp,this.endTimeStamp)
        })
	},
	destroyed () {
		 if (oWebControl != null){
			oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 
            oWebControl.JS_Disconnect().then(function(){  // 断开与插件服务连接成功
			}, 
			function() {  // 断开与插件服务连接失败
			});
        }
	}
}
</script>